import React, { useState, useEffect } from 'react';
import { history, Dispatch } from 'umi';
import { PageHeaderWrapper, PageContainer } from '@ant-design/pro-layout';
import { Descriptions, PageHeader, Modal, Card, Tabs, Table } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import InfoTitle from '@/components/InfoShow/InfoTitle';
import CommonDescription from '@/components/InfoShow/CommenDescription';
import trans from '@/utils/translate';
import { getDetail, serviceListAPI } from './service';
import { connect, ConnectProps, Link } from 'umi';
import byteToMb from '@/utils/byteToMb';
import format from '@/utils/format';
import { getStatus } from './status';
import { NodeStateType } from './model';
import { getStatus as getServiceStatus } from '../../DeployOnline/utils'
import { model } from '../../DeployOnline/EdgeInference/components/SelectModel'
interface Props extends ConnectProps {
  dispatch: Dispatch;
  node: NodeStateType;
}
interface inference {
  ServiceName: string;
  createdAt: number;
  models: model[];
  nodeId: string;
  serviceId: string;
  serviceNodeId: string;
}
const Detail: React.FC<Props> = (props) => {
  const [basic, setBasic] = useState({});
  const [node, setNode] = useState({});
  // const [serviceId, setServiceId] = useState('');
  const [serviceArr, setServiceArr] = useState([]);
  const { TabPane } = Tabs;
  const changeTab = () => {};
  const { match, dispatch } = props;
  const { id: nodeId } = match?.params as { id: string};
  const columns = [
    {
      title: trans('nodeManagement.edgeNode.serviceName'),
      dataIndex: 'ServiceName',
      render: (text: string, record: inference) => <Link to={`/deploy-online/edge-inference/detail/${record.serviceId}`}>{text}</Link>
    },
    {
      title: trans('nodeManagement.edgeNode.serviceStatus'),
      dataIndex: 'status',
      render: (text: string) => getServiceStatus(text)
    },
    {
      title: trans('nodeManagement.edgeNode.model'),
      dataIndex: 'models',
      render: (text: model) => `${text[0].name}-${text[0].version}`
    },
    {
      title: trans('nodeManagement.edgeNode.createdAt'),
      dataIndex: 'createdAt',
      render: (text: string|number) => format(text),
    },
  ]
  useEffect(() => {
    getDetail(nodeId).then(res => {
      if (res && res.code === 0) {
        const { data } = res;
        const {
          nodeId,
          nodeName,
          nodeType,
          status,
          describe,
          createdAt,
          serviceNum,
          arch,
          osImage,
          containerRuntimeVersion,
          cpu,
          mem,
        } = data;
        const statusGet = getStatus(status);
        setBasic({
          nodeName,
          nodeId,
          status: statusGet,
          describe,
          serviceNum,
          createdAt,
        });
        setNode({
          nodeType,
          arch,
          osImage,
          specifications: `${cpu} cores|${byteToMb(mem)}`,
          containerRuntimeVersion
        });
        setServiceArr(data.serviceList);
      }
    })
  }, [])
  return (
    <PageContainer onBack={() => {
      dispatch({ type: 'node/setTab', payload: { tab: 'single' }})
      history.push('/node-management/edge-node');
    }}>
      <Card>
        <InfoTitle title='document.basic' />
        <CommonDescription obj={basic} prefix='nodeManagement.edgeNode' />
      </Card>
      <Card>
        <Tabs defaultActiveKey='1' onChange={changeTab}>
          <TabPane tab={trans('nodeManagement.edgeNode.nodeInfo')} key='1'>
            <CommonDescription obj={node} prefix='nodeManagement.edgeNode' />
          </TabPane>
          <TabPane tab={trans('nodeManagement.edgeNode.serviceInfo')} key='2'>
            <Table columns={columns} dataSource={serviceArr} rowKey='serviceId'></Table>
          </TabPane>
        </Tabs>
      </Card>
    </PageContainer>
  )
}

export default connect(({ node }: { node: NodeStateType }) => ({
  node,
}))(Detail);
